import { Component } from '@angular/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzMenuModule } from 'ng-zorro-antd/menu';

@Component({
  selector: 'app-menu-vertical',
  standalone: true,
  imports: [NzMenuModule, NzIconModule],
  template: `
    <div style="width: 240px;">
      <ul nz-menu nzMode="vertical">
        <li nz-submenu nzTitle="Navigation 1" nzIcon="mail">
          <ul>
            <li nz-menu-group nzTitle="Item 1">
              <ul>
                <li nz-menu-item>Option 1</li>
                <li nz-menu-item>Option 2</li>
              </ul>
            </li>
            <li nz-menu-group nzTitle="Item 2">
              <ul>
                <li nz-menu-item>Option 3</li>
                <li nz-menu-item>Option 4</li>
              </ul>
            </li>
          </ul>
        </li>

        <li nz-submenu nzTitle="Navigation 2" nzIcon="setting">
          <ul>
            <li nz-menu-item>Option 5</li>
            <li nz-menu-item>Option 6</li>
            <li nz-submenu nzTitle="Sub">
              <ul>
                <li nz-menu-item>Option 3</li>
                <li nz-menu-item>Option 4</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  `,
})
export class MenuVerticalComponent {}
